export const resizeMixin = {
  data() {
    return {
      tabH: "1",
      tabH1: "1",
      tabH2: "1",
    };
  },
  methods: {
    getHeight() {
      const queryH = document.getElementById("queryH");
      const headerOffset = 50 + 30 + 20 + 40; // Adjust these values based on actual header heights
      const queryHHeight = queryH ? queryH.offsetHeight : 0; // Check if queryH exists
      this.tabH = `${window.innerHeight - headerOffset - queryHHeight}px`;
      this.tabH2 = `${window.innerHeight - headerOffset - queryHHeight}`;
      this.tabH1 = `${window.innerHeight - headerOffset}px`;
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getHeight();
      window.addEventListener("resize", this.getHeight);
    });
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.getHeight);
  },
};
